/**
* 详情描述组件
*/
<template>
  <div
      :class="[, {
    'z-descriptions-bordered': bordered,
    'z-descriptions': size==='default',
    'z-descriptions-middle': size==='middle',
    'z-descriptions-small': size==='small'}]"
  >
    <div class="hidden-columns" style="display: none !important;" ref="hiddenColumns"><slot></slot></div>
    <div class="z-descriptions-title" v-if="title">
      <slot name="title">{{title}}</slot>
    </div>
    <div class="z-descriptions-view">
      <div class="z-descriptions-grid" :style="gridStyle">
        <template v-for="(item, index) in dataList">
            <div
                class="z-descriptions-item"
                :style="item.style"
                v-bind="item.attrs"
            >
              <span class="z-descriptions-item-label">{{item.label}}</span>
              <span class="z-descriptions-item-content">
                  <description-content :item="item"></description-content>
                </span>
            </div>
        </template>
<!--        <tbody>-->
<!--          <tr :key="key" class="z-descriptions-row" v-for="(row, key) in rows">-->
<!--          <template v-for="(item, index) in row">-->
<!--            <template v-if="bordered">-->
<!--              <th-->
<!--                  :key="'label-' + key + '-' + index"-->
<!--                  class="z-descriptions-item-label"-->
<!--              >-->
<!--                <template v-if="item.labelTpl">-->
<!--                  <description-label :item="item"></description-label>-->
<!--                </template>-->
<!--                <template v-else>{{item.label}}</template>-->
<!--              </th>-->
<!--              <td-->
<!--                  :colSpan="item.span*2-1"-->
<!--                  :key="'content-' + key + '-' + index"-->
<!--                  class="z-descriptions-item-content"-->
<!--              >-->
<!--                <description-content :item="item"></description-content>-->
<!--              </td>-->
<!--            </template>-->
<!--            <template v-else>-->
<!--              <td-->
<!--                  :colSpan="item.span*2-1"-->
<!--                  :key="'content-' + key + '-' + index"-->
<!--                  class="z-descriptions-item"-->
<!--              >-->
<!--                <span class="z-descriptions-item-label">{{item.label}}</span>-->
<!--                <span class="z-descriptions-item-content">-->
<!--                    <description-content :item="item"></description-content>-->
<!--                  </span>-->
<!--              </td>-->
<!--            </template>-->
<!--          </template>-->
<!--        </tr>-->
<!--        </tbody>-->
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ZDescriptionsGrid',
  components: {
    // 描述内容子组件渲染
    DescriptionContent: {
      props: {
        item: Object
      },
      render(h) {
        return this.item.componentInstance.$scopedSlots.default()
      }
    },
    DescriptionLabel: {
      props: {
        item: Object
      },
      render(h) {
        console.log(this.item)
        if ( this.item.componentInstance.$scopedSlots.label) {
          return this.item.componentInstance.$scopedSlots.label()
        }
      }
    }
  },
  props: {
    title: null, // 描述内容标题
    size: {
      // 尺寸
      type: String,
      default: 'default'
    },
    bordered: {
      // 是否显示边框
      type: Boolean,
      default: false
    },
    column: {
      // 每行显示的项目个数
      type: Number,
      default: 3
    },
    gridGap: {
      type: String,
      default: ''
    },
    defSpan: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      rows: [],
      dataList: []
    }
  },
  computed: {
    gridStyle() {
      let column = this.column
      return {
        'grid-gap': this.gridGap,
        'grid-template-columns': `repeat(${column}, 1fr)`,
        // 'grid-template-areas': `"item1 item2 item3 item4" \n "item5 item5 item5 item6"`
      }
    }
  },
  watch: {
    column(value) {
      this.generateChildrenRow(this.$scopedSlots.default() || [])
    }
  },
  beforeUpdate() {
    this.generateChildrenRow(this.$scopedSlots.default() || [])
  },
  mounted() {
    this.generateChildrenRow(this.$scopedSlots.default() || [])
  },
  methods: {
    // 获取描述内容子项
    generateChildrenRow(dataSource) {
      const self = this;
      let defSpan = self.defSpan;
      let columnstart = 0
      let columnend = 0
      let row = 0
      const dataList = dataSource.filter(item => {
        return item?.componentOptions?.tag === 'z-descriptions-item'
      })
      // console.log(dataList)
      this.dataList = []
      this.rows = []
      let leftSpan = this.column
      let children = []
      dataList.forEach((item, index) => {
        const itemAttrs = item.data.attrs || {
          span: defSpan
        }
        const span = item?.componentOptions?.propsData?.span
        // 处理column与span之间的关系
        // console.log('before====', leftSpan, itemAttrs.span || 1)
        if (leftSpan <= (itemAttrs.span || defSpan) || index === (dataList.length - 1)) {
          // 剩余的列数小于设置的span个数, 或者最后一行的最后一列。自动补全，避免最后一列出现残缺的情况
          itemAttrs.span = leftSpan
          leftSpan = 0
        } else {
          leftSpan -= itemAttrs.span || defSpan
        }
        let obj = {
          span: span || defSpan,
          label: item?.componentOptions?.propsData.label || '',
          // label: item?.componentOptions?.propsData.label,
          labelTpl: item?.componentInstance?.$scopedSlots.label,
          ...item,
        }
        columnstart = columnend + 1
        columnend = columnstart + obj.span
        // console.log(columnend, obj.span)

        if (columnend > self.column) {
          columnstart = 1
          columnend =  obj.span
          row = row + 1
        }
        obj.style = {
          'grid-column': (obj.span > 1) ? `${columnstart} /  ${columnend + 1}` : ''
        }
        obj.attrs = {
          span: obj.span,
          row: row + 1,
          columnstart,
          columnend
        }
        children.push(obj)
        this.dataList.push(obj)
        // console.log('after====', leftSpan, itemAttrs.span || 1)
        if (leftSpan <= 0) {
          leftSpan = this.column
          children.length > 0 && this.$set(this.rows, this.rows.length, children)
          children = []
        }
        // 最后一行
        if (dataList.length % this.column < this.column && index === (dataList.length - 1)) {
          children.length > 0 && this.$set(this.rows, this.rows.length, children)
        }
      })
    }
  }
}
</script>

<style lang="scss">
.z-descriptions-title {
  margin-bottom: 20px;
  color: rgba(0, 0, 0, 0.85);
  font-weight: 700;
  font-size: 16px;
  line-height: 1.5715;
}
.z-descriptions-view {
  width: 100%;
  overflow: hidden;
  border-radius: 2px;
  .z-descriptions-grid {
    display: grid;
    grid-gap: 0;
  }
  .z-descriptions-item {
    display: flex;
    align-items: flex-start;
  }
  //table {
  //  width: 100%;
  //  table-layout: fixed;
  //  border-collapse: collapse;
  //}
  //&:last-child {
  //  border-bottom: none;
  //}
  //.z-descriptions-row > th, .z-descriptions-row > td {
  //  padding-bottom: 16px;
  //}
  //.z-descriptions-row, .z-descriptions-item-label {
  //  color: rgba(0, 0, 0, 0.85);
  //  font-weight: 400;
  //  font-size: 14px;
  //  line-height: 1.5715;
  //  text-align: start;
  //}
  //.z-descriptions-item-label::after {
  //  content: ':';
  //  position: relative;
  //  top: -0.5px;
  //  margin: 0 8px 0 2px;
  //}
  //.z-descriptions-item-label.z-descriptions-item-no-colon::after {
  //  content: ' ';
  //}
  //.z-descriptions-item-no-label::after {
  //  margin: 0;
  //  content: '';
  //}
  //.z-descriptions-item-content {
  //  display: table-cell;
  //  color: rgba(0, 0, 0, 0.65);
  //  font-size: 14px;
  //  line-height: 1.5715;
  //}
  //.z-descriptions-item {
  //  padding-bottom: 0;
  //}
  //.z-descriptions-item > span {
  //  display: -webkit-inline-box;
  //  display: -ms-inline-flexbox;
  //  display: inline-flex;
  //  -webkit-box-align: baseline;
  //  -ms-flex-align: baseline;
  //  align-items: baseline;
  //}
  //.z-descriptions-middle .z-descriptions-row > th, .z-descriptions-middle .z-descriptions-row > td {
  //  padding-bottom: 12px;
  //}
  //.z-descriptions-small .z-descriptions-row > th, .z-descriptions-small .z-descriptions-row > td {
  //  padding-bottom: 8px;
  //}
}
.z-descriptions-bordered {
  .z-descriptions-view {
    border: 1px solid #f3f3f3;
  }
  .z-descriptions-view > table {
    table-layout: auto;
  }
  .z-descriptions-item-label, .z-descriptions-item-content {
    padding: 16px 24px;
    border: 1px solid #e8e8e8;
  }
  .z-descriptions-item-label:last-child, .z-descriptions-item-content:last-child {
    border-right: none;
  }
  .z-descriptions-item-label {
    background-color: #f3f3f3;
  }
  .z-descriptions-item-label::after {
    display: none;
  }
  .z-descriptions-row {
    border: 1px solid #e8e8e8;
  }
  .z-descriptions-row:last-child {
    border-bottom: none;
  }
}
.z-descriptions-bordered.z-descriptions-middle .z-descriptions-item-label, .z-descriptions-bordered.z-descriptions-middle .z-descriptions-item-content {
  padding: 12px 24px;
}
.z-descriptions-bordered.z-descriptions-small .z-descriptions-item-label, .z-descriptions-bordered.z-descriptions-small .z-descriptions-item-content {
  padding: 8px 16px;
}
.z-descriptions-rtl {
  direction: rtl;
}
.z-descriptions-rtl .z-descriptions-item-label::after {
  margin: 0 2px 0 8px;
}
</style>
